<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <el-table border stripe :data="skuParams.records">
            <el-table-column type="index" label="序号" width="80px" align="center"></el-table-column>
            <el-table-column label="名称" prop="skuName"></el-table-column>
            <el-table-column label="描述" prop="skuDesc"></el-table-column>
            <el-table-column label="默认图片">
                <template #="{row,$index}">
                    <img :src="row.skuDefaultImg" alt="" style="width:100px;height:100px">
                </template>
            </el-table-column>
            <el-table-column label="重量(千克)" prop="weight"></el-table-column>
            <el-table-column label="价格(元)" prop="price"></el-table-column>
            <el-table-column label="操作" width="250px">
                <template #="{row,$index}">
                    <el-button :type="row.isSale==0?'info':'success'" size="small" :icon="row.isSale==0?Top:Bottom"
                        @click="TopOrBottom(row)"></el-button>
                    <el-button type="primary" size="small" :icon="Edit"
                        @click="ElMessage({type:'warning',message:'正在开发中'})"></el-button>
                    <el-button type="info" size="small" :icon="InfoFilled" @click="DrawerClick(row)"></el-button>
                    <el-button type="danger" size="small" :icon="Delete" @click=""></el-button>

                </template>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="sizeChange" @current-change="currentChange" v-model:current-page="currentPage"
            :page-sizes="[5, 10, 20, 30]" v-model:page-size="pageSize"
            layout=" prev, pager, next, jumper,->,total, sizes" :total="skuParams.total" background>
            :pager-count="7">
        </el-pagination>

        <el-drawer v-model="drawer" direction="rtl" size="50%">
            <div class="box">
                <div class="lef">
                    <p>名称:</p>
                    <p>描述:</p>
                    <p>价格(元):</p>
                    <p>平台属性:</p>
                    <p>销售属性:</p>
                    <p>商品图片:</p>


                </div>
                <div class="rig">
                    <p>{{skuList.skuName}}</p>
                    <p>{{skuList.skuDesc}}</p>
                    <p>{{skuList.price}}</p>
                    <p>
                        <el-tag v-for="(val,index) in skuList.skuAttrValueList" :key="index">{{val.valueName}}</el-tag>
                    </p>
                    <p>
                        <el-tag v-for="(val,index) in skuList.skuSaleAttrValueList" :key="index">{{val.saleAttrValueName}}</el-tag>
                        
                    </p>
                    <div style="height:400px;width:400px">
                        <el-carousel height="400px" type="default" direction="horizontal" :initial-index="0"
                            :autoplay="true" :interval="3000" :loop="true" trigger="hover" indicator-position="outside"
                            arrow="hover">
                            <el-carousel-item  v-for="(val,index) in skuList.skuImageList" :key="index">
                                <img :src="val.imgUrl" alt="" style="width:100%;height:100%;">
                            </el-carousel-item>
                        </el-carousel>

                    </div>
                </div>
            </div>
        </el-drawer>
    </el-card>

</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { reqSkuLisk,reqSkuById } from '@/api/product/sku/sku'
import { Top, Bottom, Delete, Edit, InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
let currentPage = ref(1)
let pageSize = ref(5)
let drawer = ref(false)
let skuList = ref({})

let skuParams = ref({})
onMounted(() => {
    getSkuList()
})

const DrawerClick = async(row) => {
    drawer.value = true
    let result = await reqSkuById(row.id)
    skuList.value = result

}

const TopOrBottom = (row) => {
    if (row.isSale == 0) {
        row.isSale = 1
        ElMessage({
            type: 'success',
            message: '上架成功'
        })

    } else {
        row.isSale = 0


        ElMessage({
            type: 'success',
            message: '下架成功'
        })
    }
}

const getSkuList = async () => {
    let result = await reqSkuLisk(currentPage.value, pageSize.value)
    skuParams.value = result
}

const sizeChange = (num) => {
    pageSize.value = num
    getSkuList()

}
const currentChange = (num) => {
    currentPage.value = num
    getSkuList()
}
</script>

<style scoped>
.box {
    width: 960px;
    background: red;
}

.lef {
    width: 215px;
    text-align: right;
    float: left;
}

.rig {
    width: 740px;
    float: right;
}

p {
    height: 40px;
}
</style>